<script setup lang="ts">
import type { AdminModel } from '@/apis/types/admin'
import { getAdminsListApi } from '@/apis/modules/admin'
import { useCommands } from './commands'
import EditAdmin from './dialog/EditAdmin.vue'
import ResetPwd from './dialog/ResetPwd.vue'
import { useConfig } from './useConfig'

const appStore = useAppStore()

const { adminInfo } = storeToRefs(appStore)
function disabled(record: AdminModel) {
  return record?.role === 1 || record.id === adminInfo.value?.id
}

const { tableColumns, queryParams } = useConfig()
const { loading, run, data, pagination } = useListRequest(getAdminsListApi, {
  params: queryParams,
  immediate: true,
})

const {
  editorVisible,
  resetPwdState,
  resetPwdVisible,
  onCreate,
  onResetPwd,
  onResetKey,
  onChangeStatus,
  onRefresh,
} = useCommands(loading)
const { createSortChange } = useTable(run, data)

onRefresh(() => run())

const onSorterChange = createSortChange(queryParams)
</script>

<template>
  <main-container
    v-model:pagination="pagination"
    :loading="loading"
    @run="run"
  >
    <template #header>
      <a-button
        type="primary"
        @click="onCreate"
      >
        添加账户
      </a-button>
      <a-input
        v-model="queryParams.username_keyword"
        allow-clear
        class="max-w-60"
        placeholder="请输入账号搜索"
        @press-enter="() => run()"
        @clear="() => run()"
      >
        <template #suffix>
          <icon-search
            class="cursor-pointer"
            @click="() => run()"
          />
        </template>
      </a-input>
    </template>
    <a-table
      v-bind="commonTableProps"
      :columns="tableColumns"
      :data="data"
      @sorter-change="onSorterChange"
    >
      <template #username="{ record }">
        <copy-field :content="record?.username">
          <div class="flex items-center space-x-1">
            <span>{{ record?.username }}</span>
            <a-tag
              v-if="record?.role === 1"
              class="border-1 !h-5 !border-primary !rounded-full !bg-primary-1 !text-xs !text-primary"
            >
              超管
            </a-tag>
          </div>
        </copy-field>
      </template>
      <template #status="{ record }">
        <a-switch
          size="small"
          :model-value="record?.status"
          :before-change="() => onChangeStatus(record)"
          :checked-value="1"
          :disabled="disabled(record)"
          :unchecked-value="2"
        />
      </template>
      <template #actions="{ record }">
        <a-tooltip
          mini
          content="重置密码"
        >
          <a-link @click="() => onResetPwd(record)">
            <i-icons-reset-password class="size-4" />
          </a-link>
        </a-tooltip>
        <a-tooltip
          mini
          content="重置密钥"
        >
          <a-link @click="onResetKey(record)">
            <i-icons-reset-ssh class="size-4" />
          </a-link>
        </a-tooltip>
      </template>
    </a-table>

    <edit-admin
      v-model="editorVisible"
      @reload="run()"
    />
    <reset-pwd
      v-model:record="resetPwdState"
      v-model="resetPwdVisible"
      @reload="run()"
    />
  </main-container>
</template>

<style scoped></style>
